<template>
  <div class="songDetails">
    <el-row>
      <el-col :span="18" class="songImgInfo" v-if="songInfo">
        <table cellpadding="0" cellspacing="0" class="songInfo">
          <tr>
            <td class="songImg"><img :src="songInfo.al.picUrl" :alt="songInfo.name"></td>
            <td>
              <ul class="songTxtInfo">
                <li class="songTitle">
                  <div class="songName"><b>{{songInfo.name}}</b></div>
                </li>
                <li class="publishTime" v-if="songInfo.ar[0].id != 0">歌手：<span class="songSonger" @click="toSongerDetails(songInfo.ar[0].id)">{{songInfo.ar[0].name}}</span></li>
                <li class="publishTime" v-if="songInfo.ar[0].id == 0">歌手：<span class="songSongerNo">{{songInfo.ar[0].name}}</span></li>
                <li class="publishTime">所属专辑：<span class="songSonger" @click="toAlbumDetails(songInfo.al.id)">{{songInfo.al.name}}</span></li>
              </ul>
              <ul class="operation">
                <li>
                  <el-button type="primary" plain><i class="el-icon-video-play"></i>&nbsp;播放</el-button>
                </li>
                <li>
                  <el-button type="primary" plain><i class="el-icon-folder-add"></i>&nbsp;收藏</el-button>
                </li>
                <li>
                  <el-button type="primary" plain><i class="el-icon-chat-dot-square"></i>&nbsp;评论</el-button>
                </li>
              </ul>
            </td>
          </tr>
        </table>

        <ul class="lyricList">
          <li class="lyricTitle">歌词</li>
          <li class="lyric" v-for="(item,i) in showLyric" :key="i">
            {{item.text}}
          </li>
          <li class="isShow">
            <p v-if="!isShow" @click="changeIsShow">[展开]</p>
            <p v-if="isShow" @click="changeIsShow">[收起]</p>
          </li>
        </ul>

        <div class="comment">
          <h2>评论（共{{commentsCount}}条评论）</h2>
          <el-input type="textarea" :rows="4" placeholder="说说你的看法吧" v-model="textarea" resize="none"></el-input>
          <div class="postComments">
            <el-button type="primary" size="mini">发表评论</el-button>
          </div>

          <h3 v-if="hotComments.length != 0">精彩评论</h3>
          <ul class="comments" v-if="hotComments.length != 0">
            <li v-for="(item,i) in hotComments" :key="i">
              <table cellpadding="0" cellspacing="0">
                <tr>
                  <td rowspan="2" class="userImg" @click="toUserDetails(item.user.userId)"><img :src="item.user.avatarUrl" :alt="item.user.nickname"></td>
                  <td class="userName" @click="toUserDetails(item.user.userId)">{{item.user.nickname}}</td>
                </tr>
                <tr>
                  <td class="commentTime">{{formatDate(item.time)}}</td>
                </tr>
                <tr>
                  <td></td>
                  <td class="commentInfo">{{item.content}}</td>
                </tr>
                <tr v-if="item.beReplied != undefined && item.beReplied == null || item.beReplied.length > 0">
                  <td></td>
                  <td class="commentInfo">
                    <div class="replyComment">
                      <table>
                        <tr>
                          <td class="userName">{{item.beReplied[0].user.nickname}}</td>
                        </tr>
                        <tr>
                          <td class="commentInfo">{{item.beReplied[0].content}}</td>
                        </tr>
                      </table>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td></td>
                  <td class="commentLiked">
                    <a href="#"><i class="el-icon-thumb"></i>（{{item.likedCount}}）</a>
                    <a href="#">回复</a>
                  </td>
                </tr>
              </table>
            </li>
          </ul>

          <h3 v-if="comments.length != 0">最新评论</h3>
          <ul class="comments" v-if="comments.length != 0">
            <li v-for="(item,i) in comments" :key="i">
              <table cellpadding="0" cellspacing="0">
                <tr>
                  <td rowspan="2" class="userImg" @click="toUserDetails(item.user.userId)"><img :src="item.user.avatarUrl" :alt="item.user.nickname"></td>
                  <td class="userName" @click="toUserDetails(item.user.userId)">{{item.user.nickname}}</td>
                </tr>
                <tr>
                  <td class="commentTime">{{formatDate(item.time)}}</td>
                </tr>
                <tr>
                  <td></td>
                  <td class="commentInfo">{{item.content}}</td>
                </tr>
                <tr v-if="item.beReplied != undefined && item.beReplied == null || item.beReplied.length > 0">
                  <td></td>
                  <td class="commentInfo">
                    <div class="replyComment">
                      <table>
                        <tr>
                          <td class="userName">{{item.beReplied[0].user.nickname}}</td>
                        </tr>
                        <tr>
                          <td class="commentInfo">{{item.beReplied[0].content}}</td>
                        </tr>
                      </table>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td></td>
                  <td class="commentLiked">
                    <a href="#"><i class="el-icon-thumb"></i>（{{item.likedCount}}）</a>
                    <a href="#">回复</a>
                  </td>
                </tr>
              </table>
            </li>
          </ul>
          <el-pagination v-if="comments.length != 0 && commentsCount" :page-size="20" :pager-count="7" layout="prev, pager, next" :total="commentsCount" :current-page="commentPage" @current-change="handleCommentChange">
          </el-pagination>
        </div>
      </el-col>

      <el-col :span="6">
        <table class="otherSong" cellpadding="0" cellspacing="0">
          <tr>
            <td><b>相似歌曲</b></td>
          </tr>
        </table>
        <table class="otherSongsList" v-if="otherSongs" cellpadding="0" cellspacing="0" style="table-layout: fixed;">
          <tr v-for="(item,i) in otherSongs" :key="i">
            <td class="otherSongName">
              <span class="songsName" @click="toSongDetails(item.id)">{{item.name}}</span>
              <span class="songersName" @click="toSongerDetails(item.artists[0].id)">{{item.artists[0].name}}</span>
            </td>
            <td class="songIcon">
              <i class="el-icon-video-play"></i>
              &nbsp;
              <i class="el-icon-plus"></i>
            </td>
          </tr>
        </table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getSongDetails, getSongLyric, getSongComment, getSimiSong } from "../../../network/home";

export default {
  name: "SongDetails",
  data() {
    return {
      songInfo: "",
      lyricInfo: "",
      lyric: [],
      isShow: false,
      commentsCount: "",
      textarea: "",
      hotComments: "",
      comments: "",
      commentPage: 1,
      otherSongs: [],
    }
  },
  computed: {
    showLyric() {
      if (this.isShow == false) {
        if (("tlyric" in this.lyricInfo) && (this.lyricInfo.tlyric.lyric != "")) {
          return this.lyric.slice(0, 6);
        } else {
          return this.lyric.slice(0, 12);
        }
      } else {
        return this.lyric;
      }
    }
  },
  created() {
    this.getSongDetails(this.$route.params.id);
    this.getSongLyric(this.$route.params.id);
    this.gethotSongComment(this.$route.params.id, 0);
    this.getSongComment(this.$route.params.id, 0);
    this.getSimiSong(this.$route.params.id);
  },
  methods: {
    getSongDetails(id) {
      getSongDetails(id).then(res => {
        console.log(res.data);
        this.songInfo = res.data.songs[0];
      })
    },
    getSongLyric(id) {
      getSongLyric(id).then(res => {
        //console.log(res.data);
        this.lyricInfo = res.data;
        this.lyric = this.formatLyric(res.data);
      })
    },
    gethotSongComment(id, offset) {
      getSongComment(id, offset).then(res => {
        this.hotComments = res.data.hotComments;
        this.commentsCount = res.data.total;
      })
    },
    getSongComment(id, offset) {
      getSongComment(id, offset).then(res => {
        //console.log(res.data);
        this.comments = res.data.comments;
      })
    },
    getSimiSong(id) {
      getSimiSong(id).then(res => {
        //console.log(res.data);
        this.otherSongs = res.data.songs;
      })
    },
    changeIsShow() {
      this.isShow = !this.isShow;
    },
    //处理歌词
    formatLyric(lyric) {
      //歌词
      let text = lyric.lrc.lyric;
      let arr = text.split("\n");
      let row = arr.length;
      //临时存放歌词 翻译
      let tlyric = [];
      let slyric = [];
      //格式完的歌词
      let fLyric = [];
      for (let i = 0; i < row; i++) {
        let temp_row = arr[i];
        let temp_arr = temp_row.split("]");
        let lyricText = temp_arr.pop();
        temp_arr.forEach(item => {
          let obj = {};
          let time_arr = item.substr(1, item.length - 1).split(":");//先把多余的“[”去掉，再分离出分、秒
          let s = parseInt(time_arr[0]) * 60 + Math.ceil(time_arr[1]); //把时间转换成秒
          obj.time = s;
          obj.text = lyricText;
          tlyric.push(obj); //每一行歌词对象存到组件的lyric歌词属性里
        })
      }

      //当不是纯音乐 或 有翻译
      if (("tlyric" in lyric) && (lyric.tlyric.lyric != "")) {
        let stext = lyric.tlyric.lyric;
        let sarr = stext.split("\n");
        let srow = sarr.length;
        for (let i = 0; i < srow; i++) {
          let stemp_row = sarr[i];
          let stemp_arr = stemp_row.split("]");
          let slyricText = stemp_arr.pop();
          stemp_arr.forEach(item => {
            let obj = {};
            let stime_arr = item.substr(1, item.length - 1).split(":");//先把多余的“[”去掉，再分离出分、秒
            let s = parseInt(stime_arr[0]) * 60 + Math.ceil(stime_arr[1]); //把时间转换成秒
            obj.time = s;
            obj.text = slyricText;
            slyric.push(obj); //每一行歌词对象存到组件的lyric歌词属性里
          })
        }

        //拼接歌词与翻译
        for (let i = 0; i < tlyric.length; i++) {
          let o = {};
          o.time = tlyric[i].time;
          o.text = tlyric[i].text;
          for (let j = 0; j < slyric.length; j++) {
            if (tlyric[i].time === slyric[j].time) {
              o.time = tlyric[i].time;
              o.text = tlyric[i].text + "\n" + slyric[j].text;
              continue;
            }
          }
          fLyric.push(o);
        }
      } else {
        fLyric = tlyric;
      }
      return fLyric;
    },
    formatDateTime(mss) {
      let minutes = Math.floor((mss % (1000 * 60 * 60)) / (1000 * 60));
      let seconds = Math.round((mss % (1000 * 60)) / 1000);

      if (minutes < 10) {
        if (seconds < 10) {
          return "0" + minutes + ":0" + seconds;
        } else {
          return "0" + minutes + ":" + seconds;
        }
      } else {
        if (seconds < 10) {
          return minutes + ":0" + seconds;
        } else {
          return minutes + ":" + seconds;
        }
      }
    },
    formatDate(time) {
      let date = new Date(time);
      let y = date.getFullYear();// 年
      let MM = date.getMonth() + 1;// 月
      MM = MM < 10 ? ('0' + MM) : MM;
      let d = date.getDate();// 日
      d = d < 10 ? ('0' + d) : d;
      return y + '-' + MM + '-' + d;
    },
    formatNumber(num) {
      num = Number(num);
      if (num == 0) {
        return num + '';
      } else
        if (num > 1 && num < 10000) {
          return num + '';
        } else {
          return (num / 10000).toFixed(1) + '万';
        }
    },
    handleCommentChange(val) {
      this.commentPage = val;
      this.getSongComment(this.$route.params.id, (val - 1) * 20);
    },
    toSongDetails(id) {
      this.$router.push({ name: "SongDetails", params: { id: id } });
      location.reload();
    },
    toSongerDetails(id) {
      this.$router.push({ name: "SongerDetails", params: { id: id } });
      location.reload();
    },
    toUserDetails(id) {
      this.$router.push({ name: "UserDetails", params: { id: id } });
    },
    toAlbumDetails(id) {
      this.$router.push({ name: "AlbumDetails", params: { id: id } });
    },
  }
}
</script>

<style scoped>
.songDetails {
  width: 75%;
  height: 100%;
  margin: 0 auto;
  border-left: RGB(211, 211, 211) 1px solid;
  border-right: RGB(211, 211, 211) 1px solid;
}
.songImgInfo {
  border-right: RGB(211, 211, 211) 1px solid;
  padding: 0 30px;
}
.songInfo {
  width: 100%;
  height: 100%;
  margin-top: 1.5rem;
}
.songImg {
  width: 200px;
  height: 200px;
}
.songImg img {
  width: 100%;
  height: 100%;
}
.songTxtInfo {
  list-style-type: none;
}
.songTitle {
  margin-bottom: 0.8rem;
}
.songName {
  font-size: 1.5rem;
}
.songSonger {
  color: RGB(64, 158, 255);
}
.songSongerNo {
  color: RGB(102, 102, 102);
}
.songSonger:hover {
  text-decoration: underline solid RGB(64, 158, 255);
}
.publishTime {
  font-size: 0.8rem;
  color: RGB(102, 102, 102);
}
.operation {
  list-style-type: none;
}
.operation li {
  float: left;
  margin-right: 5px;
}
.lyricList {
  list-style-type: none;
  margin-left: 35%;
}
.lyricTitle {
  font-size: 1.5rem;
  margin-left: 5%;
}
.lyric {
  font-size: 0.7rem;
  margin: 10px 0;
  white-space: pre-line;
}
.isShow {
  color: RGB(64, 158, 255);
}
.isShow:hover {
  text-decoration: underline;
}
.comment {
  margin-top: 7rem;
}
.el-pagination {
  margin: 0 0 2% 25%;
}
.postComments {
  text-align: right;
  margin-top: 5px;
}
.comments {
  list-style-type: none;
}
.comments li {
  margin-left: -3.2%;
  border-top: RGB(204, 204, 204) 1px solid;
  padding: 20px;
}
.userImg {
  width: 6%;
}
.userImg img {
  width: 100%;
  height: 100%;
}
.userName {
  padding-left: 20px;
  color: RGB(64, 158, 255);
}
.userName:hover {
  text-decoration: underline solid RGB(64, 158, 255);
}
.commentTime {
  padding-left: 20px;
  color: RGB(153, 153, 153);
}
.commentInfo {
  padding-left: 20px;
}
.replyComment {
  border: solid 1px RGB(222, 222, 222);
  background: RGB(242, 242, 242);
}
.commentLiked {
  text-align: right;
}
.commentLiked a {
  text-decoration: none;
  color: black;
}
.commentLiked a:hover {
  color: RGB(64, 158, 255);
}
.otherSong {
  width: 80%;
  height: 100%;
  border-bottom: 1px solid RGB(211, 211, 211);
  margin: 10px auto;
  font-size: 0.8rem;
}
.otherSong tr td {
  padding-bottom: 5px;
}
.otherSongsList {
  width: 80%;
  margin: 0 auto;
}
.otherSongName {
  width: 68%;
  padding: 0.4rem;
}
.songsName {
  font-size: 0.7rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  display: block;
}
.songsName:hover {
  text-decoration: underline;
}
.songersName {
  font-size: 0.5rem;
  color: RGB(153, 153, 153);
}
.songersName:hover {
  text-decoration: underline;
}
.songIcon {
  text-align: right;
}
</style>